<template>
  <div class="py-[24px]">
    <div class="m-auto w">
      <div class="bg-[#fff] py-[16px] px-[20px] store-info">
        <div class="flex items-center gap-[32px]">
          <div class="font-[300] text-[16px]">{{ $t("common.店铺评级") }}</div>
          <n-rate readonly :value="store.tradeMedalLevel" allow-half />
        </div>
        <div class="font-[300] text-[14px] text-[#AAAAAA]">
          {{ $t("tips.店铺评级介绍") }}
        </div>
        <div class="flex items-center font-[300] text-[14px]]">
          <div class="w-[300px]">{{ $t("common.售后体验评分") }}</div>
          <div class="w-[140px]">
            <n-progress
              type="line"
              color="#7ECF2C"
              :percentage="(store.afterSalesExperienceScore * 100) / 5"
            >
              {{ store.afterSalesExperienceScore }}
            </n-progress>
          </div>
        </div>

        <div class="flex items-center font-[300] text-[14px]]">
          <div class="w-[300px]">{{ $t("common.咨询经验评分") }}</div>
          <div class="w-[140px]">
            <n-progress
              type="line"
              color="#7ECF2C"
              :percentage="(store.consultingExperienceScore * 100) / 5"
            >
              {{ store.consultingExperienceScore }}
            </n-progress>
          </div>
        </div>

        <div class="flex items-center font-[300] text-[14px]]">
          <div class="w-[300px]">{{ $t("common.争议索赔评分") }}</div>
          <div class="w-[140px]">
            <n-progress
              type="line"
              color="#7ECF2C"
              :percentage="(store.disputeComplaintScore * 100) / 5"
            >
              {{ store.disputeComplaintScore }}
            </n-progress>
          </div>
        </div>

        <div class="flex items-center font-[300] text-[14px]]">
          <div class="w-[300px]">{{ $t("common.综合服务得分") }}</div>
          <div class="w-[140px]">
            <n-progress
              type="line"
              color="#7ECF2C"
              :percentage="(store.compositeServiceScore * 100) / 5"
            >
              {{ store.compositeServiceScore }}
            </n-progress>
          </div>
        </div>
      </div>
      <div>
        <div class="bg-[#fff] mt-[24px] px-[20px]">
          <n-checkbox-group :value="filterData" @update:value="onChangeFilter">
            <div class="search-items flex items-center py-[10px] gap-[40px]">
              <div class="w-[380px] flex items-center gap-2">
                <!-- <div>Palabra clave</div> -->
                <div class="flex-1">
                  <!-- <n-input-group> -->
                  <n-input
                    v-model:value="request.keywords"
                    placeholder="Buscar palabras clave dentro de la tienda"
                  >
                    <template #suffix>
                      <div
                        class="cursor-pointer !text-[--sub-color] flex items-center"
                        @click="onKeywordsSearch"
                      >
                        <n-icon :size="24" :component="SearchOutline" />
                      </div>
                    </template>
                  </n-input>
                </div>
              </div>

              <!-- <div>
                <n-checkbox value="certifiedFactory">
                  {{ $t("SNQuery.认证工厂") }}
                </n-checkbox>
              </div> -->
              <div>
                <n-checkbox value="shipInToday">{{ $t("SNQuery.当天发货") }}</n-checkbox>
              </div>
              <div>
                <n-checkbox value="shipIn24Hours">
                  {{ $t("SNQuery.二十四小时发货") }}
                </n-checkbox>
              </div>
              <div>
                <n-checkbox value="shipIn48Hours">
                  {{ $t("SNQuery.四十八小时发货") }}
                </n-checkbox>
              </div>
              <div>
                <n-checkbox value="noReason7DReturn">
                  {{ $t("SNQuery.七天无理由") }}
                </n-checkbox>
              </div>
            </div>
            <div class="search-items flex items-center py-[10px] gap-[40px]">
              <div
                class="cursor-pointer"
                :class="!sortData ? 'text-[--main-color]' : ''"
                @click="onClickSort('')"
              >
                {{ $t("SNQuery.综合排序") }}
              </div>
              <div
                class="flex items-center cursor-pointer"
                @click="onClickSort('monthSold')"
              >
                <div :class="sortData?.monthSold ? 'text-[--main-color]' : ''">
                  {{ $t("SNQuery.月销排序") }}
                </div>
                <div class="flex sort-wrapper">
                  <n-icon
                    :class="sortData?.monthSold == 'asc' ? '!text-[--main-color]' : ''"
                  >
                    <CaretUp></CaretUp>
                  </n-icon>
                  <n-icon
                    :class="sortData?.monthSold == 'desc' ? '!text-[--main-color]' : ''"
                  >
                    <CaretDown></CaretDown>
                  </n-icon>
                </div>
              </div>

              <div
                class="flex items-center cursor-pointer"
                @click="onClickSort('rePurchaseRate')"
              >
                <div :class="sortData?.rePurchaseRate ? 'text-[--main-color]' : ''">
                  {{ $t("SNQuery.重复购买率排序") }}
                </div>
                <div class="flex sort-wrapper">
                  <n-icon
                    :class="
                      sortData?.rePurchaseRate == 'asc' ? '!text-[--main-color]' : ''
                    "
                  >
                    <CaretUp></CaretUp>
                  </n-icon>
                  <n-icon
                    :class="
                      sortData?.rePurchaseRate == 'desc' ? '!text-[--main-color]' : ''
                    "
                  >
                    <CaretDown></CaretDown>
                  </n-icon>
                </div>
              </div>

              <div class="flex items-center cursor-pointer" @click="onClickSort('price')">
                <div :class="sortData?.price ? 'text-[--main-color]' : ''">
                  {{ $t("common.单价") }}
                </div>
                <div class="flex sort-wrapper">
                  <n-icon :class="sortData?.price == 'asc' ? '!text-[--main-color]' : ''">
                    <CaretUp></CaretUp>
                  </n-icon>
                  <n-icon
                    :class="sortData?.price == 'desc' ? '!text-[--main-color]' : ''"
                  >
                    <CaretDown></CaretDown>
                  </n-icon>
                </div>
              </div>

              <div class="flex items-center gap-2">
                <n-input-number
                  class="w-[150px]"
                  placeholder="Precio más alto"
                  :show-button="false"
                  :min="0"
                  v-model:value="request.priceStart"
                >
                  <template #prefix> ￥ </template>
                </n-input-number>
                <span>-</span>
                <n-input-number
                  class="w-[150px]"
                  placeholder="Precio más bajo"
                  :show-button="false"
                  :min="0"
                  v-model:value="request.priceEnd"
                >
                  <template #prefix> ￥ </template>
                </n-input-number>
                <n-button class="ml-[10px]" type="primary" @click="onConfirmPrice">
                  {{ $t("button.确定") }}
                </n-button>
              </div>
            </div>
          </n-checkbox-group>
        </div>
      </div>
      <div class="mt-[24px]">
        <div
          class="w m-auto mt-[24px] grid grid-cols-5 gap-4 min-h-[380px]"
          v-if="!noResult"
        >
          <div class="flex-1" v-for="item in goodsList" :key="item.offerId">
            <goodsCard :goods="item"></goodsCard>
          </div>
        </div>
        <template v-else>
          <div
            class="w-[700px] mx-auto text-center my-[110px] text-[22px] font-[400] text-[#2f2f2f] leading-[36px]"
          >
            {{ $t("tips.未搜索到商品") }}
          </div>
        </template>
      </div>

      <!-- <div class="flex mt-[24px]" v-if="result.totalPage > 1">
        <n-pagination
          class="m-auto"
          v-model:page="result.currentPage"
          :page-count="result.totalPage"
          @update:page="onClickPage"
        />
      </div> -->
      <div
        class="flex mt-[24px]"
        v-if="result.totalPage > 1 && result.currentPage < result.totalPage"
      >
        <!-- <n-pagination
          class="m-auto"
          v-model:page="result.currentPage"
          :page-count="result.totalPage"
          @update:page="onClickPage"
        /> -->

        <n-button
          :loading="goodsLoading"
          type="primary"
          class="m-auto"
          @click="onClickLoadMore"
          ghost
        >
          {{ $t("button.加载更多") }}
        </n-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { sellerSearch, getCommodityDetail } from "@/api/product";
import { useRoute } from "vue-router";
import { CaretUp, CaretDown } from "@vicons/carbon";
import goodsCard from "@/components/goodsCard.vue";
import { SearchOutline } from "@vicons/ionicons5";
const route = useRoute();
const sellerOpenId = route.params.sellerOpenId;
const request = ref({
  pageSize: 50,
  page: 1,
  priceStart: undefined,
  priceEnd: undefined,
  keywords: "",
});
const result = ref({
  currentPage: 0,
  totalPage: 1,
});
const loading = ref(false);
const goodsList = ref([]);
const noResult = ref(false);
const storeLoading = ref(false);
const goodsLoading = ref(false);
const store = ref({});
const sortData = ref(null);
const filterData = ref([]);

const getStoreInfo = async (id) => {
  //商品详情里含有店铺评分
  storeLoading.value = false;
  const { data } = await getCommodityDetail(id);
  store.value = data.data.sellerDataInfo;

  storeLoading.value = true;
};
const onKeywordsSearch = async () => {
  initSearch();
};
const sellerSearchHandler = async () => {
  goodsLoading.value = true;
  const { data } = await sellerSearch({
    sellerOpenId,
    ...request.value,
    country: "es",
    filter: filterData.value?.join(",") || "",
    sort: sortData.value ? JSON.stringify(sortData.value) : "",
    country: route.params.country || "",
  });

  goodsLoading.value = false;
  const { currentPage, pageSize, totalPage, totalRecords } = data.data;
  result.value = { currentPage, pageSize, totalPage, totalRecords };
  request.value.page = currentPage;
  // goodsList.value.push(...data.data.data);
  if (!data.data.data) {
    noResult.value = !goodsList.value || goodsList.value.length === 0;
  } else {
    goodsList.value.push(...data.data.data);
    noResult.value = false;
  }

  if (data.data.data && !store.value.tradeMedalLevel) {
    getStoreInfo(data.data.data[0].offerId);
  }
};
sellerSearchHandler();

const onClickPage = async (page) => {
  request.value.page = page;
  await sellerSearchHandler();
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

const initSearch = (resetSn) => {
  result.value = {
    currentPage: 0,
    totalPage: 1,
  };
  request.value.page = 1;
  goodsList.value = [];

  sellerSearchHandler();
};
const onChangeFilter = (value) => {
  filterData.value = value;
  initSearch();
};
const onClickSort = (key) => {
  if (key) {
    if (!sortData.value || !sortData.value[key]) sortData.value = {};

    sortData.value[key] = sortData.value[key] === "desc" ? "asc" : "desc";
  } else {
    sortData.value = null;
  }

  initSearch();
};

const onConfirmPrice = () => {
  initSearch();
};

const onClickLoadMore = () => {
  request.value.page += 1;
  sellerSearchHandler();
};
</script>

<style lang="scss" scoped>
.store-info {
  > div {
    margin-bottom: 6px;
  }
}

.search-items {
  border-bottom: 1px solid #d8d8d8;
  &:last-child {
    border-bottom: none;
  }
}

.sort-wrapper {
  position: relative;
  width: 16px;
  i {
    position: absolute;
    right: 0;
    color: #cccccc;
    &:first-child {
      bottom: -3px;
    }
    &:last-child {
      top: -3px;
    }
  }
}
</style>
